<script setup lang="ts">
import { computed } from 'vue'
import { useMapPosition, setMapPitch, setMapBearing } from './position'
import { lngLat2str } from '@/geom/great-circle'

const pos = useMapPosition()

const cursor = computed(() => lngLat2str(pos.cursor))
</script>
<template>
  <div class="map-position-view map-pane pane-block">
    <div class="row">
      <div class="col-18em">位置: {{ cursor }}</div>
      <div class="col-7em">| 缩放: {{ pos.zoom }}</div>
      <div class="col-7em" style="cursor: pointer" @click="setMapPitch(0)">
        | 倾斜: {{ pos.pitch }}°
      </div>
      <div class="col-7em" style="cursor: pointer" @click="setMapBearing(0)">
        | 方位: {{ pos.bearing }}°
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@import '../style/var';
.map-position-view {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
